<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册用户</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/login.css">
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/checkInput_Ajax.js"></script>
    <style>
        body{
            background-size: 100%;
        }
        .showbtn{
            float: right;
            margin-top: -32.5px;
            padding: 6px 10px;
        }
    </style>
</head>
<body>
<h2 class="title" style="margin-top: 50px;">Security Register</h2>
<div class="box">   
    <div class="box-small">
        <h4 class="title">注册账号</h4>
        <form action="RegisterServlet" enctype="multipart/form-data" method="post">
            <div class="form-group">
                <input id="phone_number" type="text" name="phone_number"  class="form-control" placeholder=" 手机号码"/>
                <div class="showsIcon" style="background-image: url(img/phone.png);top: 5.5px;"></div>
                <span id="s_0"></span>
            </div>
            <div class="form-group">
                <input id="email" type="email" name="email"  class="form-control" placeholder=" 邮箱"/>
                <div class="showsIcon" style="background-image: url(img/mailbox.png);top: 5.5px;"></div>
                <span id="s_1"></span>
            </div>
            <div class="form-group">
                <input id="name" type="text" name="name"  class="form-control" placeholder=" 用户名"/>
                <div class="showsIcon" style="background-image: url(img/user.png);top: 5.5px;"></div>
                <span id="s_2"></span>
            </div>
            <div class="form-group">
                <input type="password" name="password" class="form-control" placeholder=" 密码"/>
                <div class="showsIcon" style="background-image: url(img/pwd.png);width: 28px;height: 28px;left: 3px;"></div>
            </div>
            <div class="form-group">
                <input id="comfim" type="password" name="confimPassword" class="form-control" placeholder=" 确认密码"/>
                <div class="showsIcon" style="background-image: url(img/pwd.png);width: 28px;height: 28px;left: 3px;"></div>
                <span id="s_comfim"></span>
            </div>
            <div class="form-group">
                <input id="lefile" type="file" style="display:none" name="headfile" >
                <div class="input-append">
                    <input id="photoCover" class="form-control" type="text" placeholder="(可选)不上传 则头像为默认头像" name="headfileTemp">
                    <div class="showsIcon" style="background-image: url(img/img.png);top: 5.5px;"></div>
                    <a class="btn btn-info btn-sm showbtn" onclick="$('input[id=lefile]').click();">Browse</a>
                </div>
            </div>
            <div class="form-group">
                <button type="submit" class="btn btn-primary btn-block">注册</button>
            </div>
        </form>
    </div>
    <div class="box-bottom">
        <div>已有账号， <a href="login.jsp" style="text-decoration: none;" title="立即登录">立即登录</a></div>
    </div>
</div>
</body>
</html>
<script type="text/javascript">
    $('input[id=lefile]').change(function() {
        $('#photoCover').val($(this).val());
    });
</script>